<template>
  <div class="tactical-report-container">
    <div class="page-header">
      <div class="header-content">
        <h2>战术报告管理</h2>
        <!-- <p>管理和查看战术演练报告</p> -->
      </div>
      <div class="header-actions">
        <el-button type="success" @click="handleCreate" >
          <el-icon><Plus /></el-icon>
          新建报告
        </el-button>
        <el-button type="primary" @click="createReport" >
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
        <el-button type="primary" @click="createReport" >
          <el-icon><Download /></el-icon>
          批量导出
        </el-button>
      </div>
    </div>

    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in dataTypes" :key="item.label">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-label">{{ item.label }}</div>
              <div class="stat-number">{{ item.value }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="content-wrapper">
      <div class="filter-section">
        <el-form :model="filterForm" inline>
          <el-form-item label="报告标题">
            <el-input
              v-model="filterForm.title"
              placeholder="请输入报告标题"
              clearable
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="报告类型">
            <el-select
              v-model="filterForm.type"
              placeholder="请选择类型"
              clearable
            >
              <el-option label="演练报告" value="exercise" />
              <el-option label="评估报告" value="assessment" />
              <el-option label="总结报告" value="summary" />
              <el-option label="分析报告" value="analysis" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="filterForm.status"
              placeholder="请选择状态"
              clearable
            >
              <el-option label="草稿" value="draft" />
              <el-option label="已发布" value="published" />
              <el-option label="已归档" value="archived" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="table-section">
        <el-table :data="tableData" v-loading="loading" stripe border>
          <el-table-column prop="title" label="报告标题" />
          <el-table-column prop="type" label="报告类型" width="120">
            <template #default="{ row }">
              <el-tag :type="getTypeTagType(row.type)">
                {{ getTypeText(row.type) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="author" label="创建人" width="120" />
          <el-table-column prop="createTime" label="创建时间" width="160" />
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-tooltip content="查看详情" placement="top" show-after="1000">
                <el-button type="primary" link @click="handleSee(row)">
                  <el-icon><View /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="编辑" placement="top" show-after="1000">
                <el-button type="primary" link @click="handleEdit(row)">
                  <el-icon><Edit /></el-icon>
                </el-button>
              </el-tooltip>

              <el-tooltip content="下载" placement="top" show-after="1000">
                <el-button type="primary" link @click="downloadReport(row)">
                  <el-icon><Download /></el-icon>
                </el-button>
              </el-tooltip>

              <el-tooltip
                content="分享"
                placement="top"
                show-after="1000"
                v-if="false"
              >
                <el-button type="primary" link @click="shareReport(row)">
                  <el-icon><Share /></el-icon>
                </el-button>
              </el-tooltip>

              <el-tooltip content="删除" placement="top" show-after="1000">
                <el-button type="danger" link @click="deleteReport(row)">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 弹框 -->
    <el-dialog
      :title="viewDetail.title"
      v-model="viewDetail.open"
      width="800px"
      append-to-body
    >
      <Form
        v-if="viewDetail.open"
        :columns="viewDetail.columns"
        :data="viewDetail.form"
        :rules="viewDetail.rules"
        :inline="false"
        :disabled="viewDetail.disabled"
        :buttons="viewDetail.buttons"
        :key="viewDetail.disabled"
        height="300px"
        @submit="viewDetail.submit"
        @cancel="viewDetail.cancel"
      >
      </Form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Download, Plus, Edit, Delete, Share } from "@element-plus/icons-vue";

const router = useRouter();

const dataTypes = [
  { label: "报告总数", value: "12345" },
  { label: "本月新增", value: "85" },
  { label: "待审核", value: "152" },
  { label: "已发布", value: "24" },
];

// 响应式数据
const loading = ref(false);
const tableData = ref([]);

// 筛选表单
const filterForm = reactive({
  title: "",
  type: "",
  status: "",
});

// 分页配置
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0,
});

// 模拟数据
const mockData = [
  {
    id: 1,
    title: "2024年第一季度红蓝对抗演练报告",
    type: "exercise",
    author: "张三",
    status: "published",
    createTime: "2024-01-15 10:30:00",
    updateTime: "2024-01-20 14:20:00",
    description:
      "本报告总结了第一季度进行的红蓝对抗演练活动，包括演练过程、发现问题和改进建议。",
  },
  {
    id: 2,
    title: "网络安全防护能力评估报告",
    type: "assessment",
    author: "李四",
    status: "draft",
    createTime: "2024-01-16 09:15:00",
    updateTime: "2024-01-18 16:45:00",
    description: "对当前网络安全防护体系进行全面评估，识别薄弱环节。",
  },
  {
    id: 3,
    title: "漏洞挖掘训练总结报告",
    type: "summary",
    author: "王五",
    status: "published",
    createTime: "2024-01-17 11:00:00",
    updateTime: "2024-01-17 11:00:00",
    description: "总结漏洞挖掘训练活动的成果和经验，为后续训练提供参考。",
  },
]

// 生命周期
onMounted(() => {
  fetchData();
});

// 方法
const fetchData = async () => {
  loading.value = true;
  try {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    tableData.value = mockData;
    pagination.total = mockData.length;
  } catch (error) {
    ElMessage.error("获取数据失败");
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  pagination.page = 1;
  fetchData();
};

const resetFilter = () => {
  filterForm.title = "";
  filterForm.type = "";
  filterForm.status = "";
  handleSearch();
};

const handleSizeChange = (size) => {
  pagination.pageSize = size;
  fetchData();
};

const handleCurrentChange = (page) => {
  pagination.page = page;
  fetchData();
};

// 列字段
const columns = ref([
  {
    prop: "title",
    label: "标题报告",
    type: "input",
    width: "100%",
    formItemWidth: "100%",
  },
  {
    prop: "type",
    label: "类型",
    type: "select",
    options: [
      { value: "exercise", label: "演练报告" },
      { value: "assessment", label: "评估报告" },
      { value: "summary", label: "总结报告" },
      { value: "analysis", label: "分析报告" },
    ],
    width: "100%",
    formItemWidth: "100%",
  },
  {
    prop: "status",
    label: "状态",
    type: "select",
    options: [
      { value: "published", label: "已发布" },
      { value: "archived", label: "待审核" },
      { value: "draft", label: "草稿" },
    ],
    width: "100%",
    formItemWidth: "100%",
  },
  {
    prop: "author",
    label: "创建人",
    type: "input",
    width: "100%",
    formItemWidth: "100%",
  },
]);
const handleCreate = () => {
  viewDetail.value.title = "创建";
  viewDetail.value.disabled = false;
  viewDetail.value.open = true;
  viewDetail.value.form = {};
  viewDetail.value.buttons = [
    { type: "default", text: "取消", prop: "cancel" },
    { type: "primary", text: "提交", prop: "submit" },
  ];
};

const handleSee = (row) => {
  viewDetail.value.title = "查看";
  viewDetail.value.disabled = true;
  viewDetail.value.open = true;
  viewDetail.value.form = row;
  viewDetail.value.buttons = [
    { type: "default", text: "取消", prop: "cancel" },
  ];
};
const handleEdit = (row) => {
  viewDetail.value.title = "编辑";
  viewDetail.value.disabled = false;
  viewDetail.value.open = true;
  viewDetail.value.form = row;
  viewDetail.value.buttons = [
    { type: "default", text: "取消", prop: "cancel" },
    { type: "primary", text: "提交", prop: "submit" },
  ];
};
const viewDetail = ref({
  title:"",
  open: false,
  disabled: false,
  form: {
    id: "",
    timeAppointment0: null,
    timeAppointment1: null,
    street: null,
    address: null,
    cusAddress: null,
    remark: null,
  },
  originData: {},
  columns: [
    {
      title: "",
      cols: columns.value,
    },
  ],
  rules: [],
  submit: (val) => {
    if (val.id) {
      ElMessage.success("编辑报告成功");
    } else {
      tableData.value.push(val);
      ElMessage.success("新建报告成功");
    }

    viewDetail.value.open = false;
  },
  cancel: () => {
    viewDetail.value.open = false;
  },
  buttons: [
    { type: "primary", text: "保存", prop: "submit" },
    { type: "default", text: "取消", prop: "cancel" },
  ],
});

const downloadReport = (row) => {
  ElMessage.success(`正在下载报告: ${row.title}`);
};

const shareReport = (row) => {
  ElMessage.info(`分享报告: ${row.title}`);
};

const deleteReport = (row) => {
  ElMessageBox.confirm(`确认删除报告"${row.title}"吗？`, "删除确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  }).then(() => {
    const index = tableData.value.findIndex((item) => item.id === row.id);
    if (index > -1) {
      tableData.value.splice(index, 1);
      pagination.total--;
      ElMessage.success("删除成功");
    }
  });
};

// 工具函数
const getTypeTagType = (type) => {
  const tagMap = {
    exercise: "primary",
    assessment: "success",
    summary: "warning",
    analysis: "info",
  };
  return tagMap[type] || "info";
};

const getTypeText = (type) => {
  const textMap = {
    exercise: "演练报告",
    assessment: "评估报告",
    summary: "总结报告",
    analysis: "分析报告",
  };
  return textMap[type] || "未知类型";
};

const getStatusTagType = (status) => {
  const tagMap = {
    draft: "info",
    published: "success",
    archived: "warning",
  };
  return tagMap[status] || "info";
};

const getStatusText = (status) => {
  const textMap = {
    draft: "草稿",
    published: "已发布",
    archived: "已归档",
  };
  return textMap[status] || "未知状态";
};
</script>

<style lang="scss" scoped>
.tactical-report-container {
  background-color: var(--bg-color);
}

  .header-content {
    h2 {
      margin: 0 0 8px 0;
      color: var(--text-color);
      font-size: 24px;
      font-weight: 600;
    }

    p {
      margin: 0;
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }


.content-wrapper {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

.filter-section {
  border-bottom: 1px solid var(--border-color);
}

.table-section {
  padding: 20px;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
